import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import {numRound, unReplaceBreak, zeroize} from '@/libs/toolkit'
import {computed, defineComponent, PropType} from 'vue'

const PhoneTargetBlock = defineComponent({
  name: 'PhoneTargetBlock',
  props: {
    target: {
      type: Object as PropType<MyPm.TableData>,
      required: true
    },
    title: {
      type: String
    }
  },
  setup(props, {slots}) {
    let targetName = computed(() => props.target.pmTargetName)
    let targetStand = computed(() =>
      JSON.parse(JSON.stringify(unReplaceBreak(props.target.pmTargetStand)))
    )
    return () => (
      <div class='w-full flex flex-col'>
        <div class='w-full px-16 flex items-center justify-between'>
          <CnNormalSpan>{props.title}</CnNormalSpan>
          <div>{slots.navUtils?.()}</div>
        </div>
        {props.target.pmId !== -1 ? (
          <div class='w-full bg-white px-12 flex flex-col gap-y-8 py-12'>
            <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
              <CnMediumSpan>指标名称</CnMediumSpan>
              <CnNormalSpan
                style={{
                  whiteSpace: 'break-spaces',
                  fontSize: '12px'
                }}
              >
                {targetName.value}
              </CnNormalSpan>
            </div>
            <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
              <CnMediumSpan>考核标准</CnMediumSpan>
              <CnNormalSpan
                style={{
                  whiteSpace: 'break-spaces',
                  fontSize: '12px'
                }}
              >
                {targetStand.value}
              </CnNormalSpan>
            </div>

            <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
              <CnMediumSpan>权重(%)</CnMediumSpan>
              <CnNormalSpan
                style={{
                  whiteSpace: 'break-spaces',
                  fontSize: '12px'
                }}
              >
                {props.target.pmTargetWeight}
              </CnNormalSpan>
            </div>
            {props.target.scoreSelfCheckList?.map(item =>
              item ? (
                <>
                  <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                    <CnMediumSpan>{item.makeUserName}的自评</CnMediumSpan>
                    <CnNormalSpan
                      style={{
                        whiteSpace: 'break-spaces',
                        fontSize: '12px'
                      }}
                    >
                      {zeroize(item.score, 1)}
                    </CnNormalSpan>
                  </div>
                  {item.scoreContent ? (
                    <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                      <CnMediumSpan>{item.makeUserName}的自评说明</CnMediumSpan>
                      <CnNormalSpan
                        style={{
                          whiteSpace: 'break-spaces',
                          fontSize: '12px'
                        }}
                      >
                        {unReplaceBreak(item.scoreContent)}
                      </CnNormalSpan>
                    </div>
                  ) : null}
                </>
              ) : null
            )}

            {props.target.leaderCheckList?.map(item =>
              item ? (
                <>
                  <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                    <CnMediumSpan>主管：{item.makeUserName}的评分</CnMediumSpan>
                    <CnNormalSpan
                      style={{
                        whiteSpace: 'break-spaces',
                        fontSize: '12px'
                      }}
                    >
                      {zeroize(item.score, 1)}
                    </CnNormalSpan>
                  </div>
                  {item.scoreContent ? (
                    <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                      <CnMediumSpan>主管：{item.makeUserName}的评分说明</CnMediumSpan>
                      <CnNormalSpan
                        style={{
                          whiteSpace: 'break-spaces',
                          fontSize: '12px'
                        }}
                      >
                        {unReplaceBreak(item.scoreContent)}
                      </CnNormalSpan>
                    </div>
                  ) : null}
                </>
              ) : null
            )}
          </div>
        ) : (
          <div class='w-full bg-white px-12 flex flex-col gap-y-8  py-12'>
            {props.target.scoreSelfCheckList?.map(item =>
              item ? (
                <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                  <CnMediumSpan>{item.makeUserName}的自评总分</CnMediumSpan>
                  <CnNormalSpan
                    style={{
                      whiteSpace: 'break-spaces',
                      fontSize: '12px'
                    }}
                  >
                    {zeroize(item.score, 1)}
                  </CnNormalSpan>
                </div>
              ) : null
            )}
            {props.target.leaderCheckList?.map(item =>
              item ? (
                <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                  <CnMediumSpan>主管：{item.makeUserName}的评分总分</CnMediumSpan>
                  <CnNormalSpan
                    style={{
                      whiteSpace: 'break-spaces',
                      fontSize: '12px'
                    }}
                  >
                    {zeroize(item.score, 1)}
                  </CnNormalSpan>
                </div>
              ) : null
            )}
          </div>
        )}
      </div>
    )
  }
})

export default PhoneTargetBlock
